<template>
  <div :class="articleContent.articelwrap" class="articel-wrap">
    <article>
      <h1 class="text-center">{{content.title}}</h1>
      <div :class="articleContent.source" class="clearfix text-right">
        <span>{{content.date | time}}</span>
        <span>{{content.source}}</span>
      </div>
      <div :class="articleContent.content">
        <div v-html="jsonData"></div>
      </div>
    </article>
    <h2 style="color: #999;margin-top: 40px">推荐阅读</h2>
    <div class="auto list" :class="articleContent.list">
      <template v-for="item in list">
        <item :type="false" :content="item" note="red"></item>
      </template>
    </div>
  </div>
</template>

<script>
  import request from '../../../api/request'
  import item from '../../components/news/listItem'
  import axios from 'axios'
  export default {
    name: 'articlePage',
    data () {
      return {
        list: [],
        content: '',
        jsonData: ''
      }
    },
    components: {
      item
    },
    created () {
      let id = this.$route.params.id
      request.get('articleList').then((response) => {
        if (response.data.code === '200') {
          this.list = response.data.data.items.slice(0, 5)
        }
      })
      request.get('articleContent', {id: id}).then((response) => {
        if (response.data.code === '200') {
          this.content = response.data.data.content
          axios.get(response.data.data.content.target).then((responseJson) => {
            this.jsonData = responseJson.data.html
          })
        }
      })
    }
  }
</script>

<style lang="scss" module="articleContent">
.articelwrap{
  background-color:#fff;
  padding:80px 50px;
  h1{
    color:#33383e;
    font-size: 20px;
    margin-bottom:20px;
  }
  .source{
    font-size: 14px;
    color: #aaa;
    margin-bottom:20px;
    span{
      margin-left: 50px;
    }
  }
  .content{
    color: #878787;
    font-size: 14px;
    line-height: 30px;
    img{
      max-width: 100%;
      display: block;
      margin:0 auto;
    }
    p{
      margin-bottom:10px;
    }
  }
}
</style>
<style lang="scss">
  .articel-wrap{
    .list{
      .container{
        border-right: none;
      }
    }
  }
</style>
